﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Multiple Graphics Layers</title>
  <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/dojo/dijit/themes/tundra/tundra.css" />
    <script type="text/javascript" src="http://localhost:8080/testA/arcgisjs/init.js"></script>
    <script type="text/javascript" src="arcgisjs/jsapi_vsdoc12_v38.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/testA/arcgisjs/js/esri/css/esri.css" />
    <script>
        dojo.require("esri.map");
        dojo.require("esri.tasks.query");

        var map;

        function init() {
            map = new esri.Map("map", {
                basemap: "streets",
                center: [-98.215, 38.382],
                zoom: 7,
                slider: false
            });
            dojo.connect(map, "onLoad", doQueries);
        }

        function doQueries(map) {
            
            var countyQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
            var countyQuery = new esri.tasks.Query();
            countyQuery.outFields = ["*"];
            countyQuery.returnGeometry = true;
            countyQuery.outSpatialReference = map.spatialReference;
            countyQuery.where = "STATE_NAME = 'Kansas'";
            countyQueryTask.execute(countyQuery, addCountyFeatureSetToMap);

           
            var cityQueryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0/");
            var cityQuery = new esri.tasks.Query();
            cityQuery.outFields = ["*"];
            cityQuery.returnGeometry = true;
            cityQuery.outSpatialReference = map.spatialReference;
            cityQuery.where = "STATE_NAME = 'Kansas'";
           // cityQueryTask.execute(cityQuery, addCityFeatureSetToMap);
            cityQueryTask.executeForCount(cityQuery, function (count) {
                dojo.byId("info").innerHTML = count + " features matched the input query";
            }, function (error) {
                dojo.byId("info").innerHTML = error + " features matched the input query";
            });
           
        }

        function addCountyFeatureSetToMap(featureSet) {
            //定义样式
            var symbol = new esri.symbol.SimpleFillSymbol();
            symbol.setColor(new dojo.Color([150, 150, 150, 0.5]));

         
            //设置信息模板
            var countyLayer = new esri.layers.GraphicsLayer();
            countyLayer.setInfoTemplate(new esri.InfoTemplate("${NAME}", "${*}"));
            map.addLayer(countyLayer);

            //在地图上遍历，显示查询的内容
            dojo.forEach(featureSet.features, function (feature) {
                countyLayer.add(feature.setSymbol(symbol));//在地图上显示元素
            });
        }

        function addCityFeatureSetToMap(featureSet) {
            var symbol = new esri.symbol.SimpleMarkerSymbol();
            symbol.setColor(new dojo.Color([0, 0, 255]));

        
            var cityLayer = new esri.layers.GraphicsLayer();
            cityLayer.setInfoTemplate(new esri.InfoTemplate("${CITY_NAME}", "${*}"));

            map.addLayer(cityLayer);
            map.reorderLayer(cityLayer, 1);

          
            dojo.forEach(featureSet.features, function (feature) {
                cityLayer.add(feature.setSymbol(symbol));
            });
        }

        dojo.ready(init);
    </script>
  </head>
  <body>
    <div id="map" class="claro" style="width:800px; height:400px; border:1px solid #000;"></div>
      <div id="info">dadfdf</div>
      <div id="info2">dadfdf</div>
  </body>
</html>